<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--标准mui.css-->
	<link rel="stylesheet" href="./css/mui.min.css">
	<!--App自定义的css-->
	<link rel="stylesheet" type="text/css" href="./css/app.css" />
    <title>登录</title>
    <style>
        body {
            background-color: #fff;
        }
        .mui-input-group {
            font-size: 14px;
        }
        .mui-input-group input {
            font-size: 14px;
        }
        .username,
        .password {
            margin: 20px auto;
            width: 76%;
            height: 40px;
            line-height: 40px;
            border: 1px solid #2e78ff;
            border-radius: 50px;
        }
        .phone {
            float: left;
            margin-left: 15px;
            margin-top: 10px;
            width: 11px;
            height: 17px;
        }
        .key {
            float: left;
            margin-top: 10px;
            margin-left: 15px;
            width: 10px;
            height: 19px;
        }
        input {
            float: left;
            margin-left: 15px;
            border: 0px;
            font-size: 14px;
            height: 38px;
            line-height: 38px;
            width: 60%;
        }
        .login {
            margin: 40px auto;
            width: 80%;
            height: 40px;
            border: none;
            outline: none;
            background: #2e78ff;
            color: #fff;
            font-size: 16px;
            display: block;
        }
    </style>
</head>
<body>
    <div class="username">
        <img src="./images/phone.png" alt="" class="phone">
        <input type="text" placeholder="请输入帐号" id="user" maxlength="11">
    </div>
    <div class="password">
        <img src="./images/key.png" alt="" class="key">
        <input type="password" placeholder="请输入密码" id="psd">
    </div>
    <button class="login">登录</button>
    <script src="./js/mui.min.js"></script>
	<script src="./js/jquery-3.2.1.min.js" charset="utf-8"></script>
    <script src="./js/path.js" charset="utf-8"></script>
    <script type="text/javascript">
    $('.login').click(()=>{

        var check = true;
        mui("input").each(function() {
            //若当前input为空，则alert提醒
            if(!this.value || this.value.trim() == "") {
                mui.alert("信息不允许为空");
                check = false;
                return false;
            }
        });
        //校验通过，继续执行业务逻辑
        if(check){
            var user = $("#user").val();
            var password = $("#psd").val();
            $.ajax({
                url:path+"/app/login",
                type:'post',
                data:{
                    "username" : user,
                    "password" : password
                },
                success:(data)=>{
                    if(data.success='1'){
                        document.cookie="name="+user;

                        window.location.replace('./index.html');

                    }else{
                        mui.alert(data.message);
                    }
                },
                error:(err)=>{
                    mui.alert(err.message);
                }
            })

        }
    })
    function getCookie(c_name)
        {
        if (document.cookie.length>0)
          {
          c_start=document.cookie.indexOf(c_name + "=")
          if (c_start!=-1)
            {
            c_start=c_start + c_name.length+1
            c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
            return unescape(document.cookie.substring(c_start,c_end))
            }
          }
        return ""
        }

        function setCookie(c_name,value,expiredays)
   {
   var exdate=new Date()
   exdate.setDate(exdate.getDate()+expiredays)
   document.cookie=c_name+ "=" +escape(value)+
   ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
   }
    </script>
</body>
</html>
